<html>
<head>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
<style>
div.ballClass {
	-moz-border-radius: 100px;
	border-radius: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	background-color: rgba(0, 25, 255, 0.5);
	width: 10em;
	height: 10em;
}
</style>

<script>

	var preX;
	var preY;
	$('#controlPage').live('pageinit',function(event) {
		
    	
		$('#ball').bind('touchmove',function(e){
			e.preventDefault();
		    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			var y = touch.pageY - ($(this).height()/2);
			var x = touch.pageX - ($(this).width()/2);
		
			$(this).offset( { top: y , left: x });
			
			var yPercent = Math.round(y / $(window).height() *100);
			var xPercent = Math.round(x / $(window).width() *100);
			//alert(!preX +"_"+Math.abs(preX-x)+"_"+!preY +"_"+  Math.abs(preY-y))
			if(!preX || Math.abs(preX-x) > 50 || !preY || Math.abs(preY-y)   > 50 ){
				preX = x;
				preY = y;
				$.ajax({
					url : "/resources/remote/update/",
					type : "POST",
					data : {
						"x" : xPercent,
						"y" : yPercent,
						"sessionId" : "${it.sessionId}"
					}//,success : function() {alert("UPDATE");}
				});
			}
		});
		
		
		
		
	});
</script>
</head>
<body>
	
	<div data-role="page" id='controlPage'>
			<div class="ballClass" id="ball"></div>
	</div>
	
</body>
</html>
